<template>
    <div>
        <h1>provide and inject</h1>
        <children />
        <button @click="changeTest">修改透传数据</button>
    </div>
</template>
<script>
import {provide, reactive, ref, toRef, toRefs} from 'vue'
import children from './inject';
export default {
    components: {
      children
    },
    setup () {
        const msg = ref(0)
        const state = reactive({
            testmsg: '测试往下透传一个数据',
            testmsg2: '透传一个静态'   
        })

        const changeTest = () => {
          state.testmsg = '修改了数据',
          msg.value++
        }
        
        provide('msg',msg)
        provide('testmsg2',state.testmsg2)
        provide('testmsg',toRef(state,'testmsg'))
        // ref toRef的区别
        // ref是复制，修改响应式数据不会影响原始数据,数据发生改变,界面就会自动刷新
        // toRef是引用，修改响应式数据，会影响原始数据，数据发生改变，界面不会更新
        // toRefs是影响多个参数

        // toRef 是将对象A中的某个属性X转换为响应式数据，其接收两个参数，第一个参数为对象A，第二个参数为对象中某个属性X
        
        // toRefs() 接收一个对象作为参数，并遍历对象身上的所有属性，然后逐个调用toRef()执行
        // 以此将响应式对象转为普通对象，便于在模板中可以直接使用属性

        return {
            ...toRefs(state),
            msg,
            changeTest
        }
    }
}
</script>